<template>
  <div class="item-bg on-off">
    <div class="on-off">
      <div v-for="(status, index) in statuss" :key="index">
        <div :class="[`status${status.id}`]">
          <div class="display">
            <div class="open" :class="{ 'active': status.openPosition }" @click="() => openSwitch(status)">
              开
            </div>
            <div class="off" :class="{ 'active': status.closePosition }" @click="() => offSwitch(status)">
              关
            </div>
            <div class="ting" :class="{ 'active': status.closePosition }" @click="() => offSwitch(status)">
              急停
            </div>
            <div class="fault" :class="{ 'active_': status.fault }">
            </div>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <div v-if="isPopupVisible" class="popup">
        操作成功
      </div>
      <!--模拟量显示-->
      <div v-for="(simulateValue, index) in simulateValues" :key="index" :class="`simulate-value${simulateValue.id}`">
        {{ simulateValue.value }}
      </div>
      <div class="qiting1">自耦柜</div>
      <div class="qiting2">交流柜</div>
      <div class="qiting3">直流柜</div>
      <div  class="qitinggui1">电流A</div>
      <div  class="qitinggui2">电流B</div>
      <div  class="qitinggui3">电流C</div>
      <div  class="qitinggui4">电压A</div>
      <div  class="qitinggui5">电压B</div>
      <div  class="qitinggui6">电压C</div>
      <div  class="qitinggui7">直流电压</div>
      <div  class="qitinggui8">直流电流</div>
    </div>
    <div v-if="isModalOpen" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <input id="contextNumber" class="content" v-model="inputValue" placeholder="请输入内容" />
        <button class="but" @click="parameterSettings">确定</button>
      </div>
    </div>
  </div>
</template>
<style src="../image.css"></style>
<script setup>
import { ref, computed } from 'vue';
import initData from "../../initData"
const { socket } = initData(true);
import bus from '../../utils/bus';
// main.js 或其他适当的入口文件
const msg = ref('');
const idDevice = ref('');
const isModalOpen = ref(false)

const openModal = async (valve) => {
  isModalOpen.value = true
  idDevice.value = (valve.id).toString();
}

function closeModal() {
  isModalOpen.value = false
}

// 创建阀门的初始状态
const statuss = ref([
  //启停柜
  { id: 23, Value: ref(0) },
  { id: 24, Value: ref(0) },
  { id: 25, Value: ref(0) },
]);
//创建模拟量的初始值
const simulateValues = ref([
  //启停柜电压电流
  { id: 17, value: ref(111 + 'V') },
  { id: 18, value: ref(111 + 'V') },
  { id: 19, value: ref(111 + 'V') },
  { id: 20, value: ref(111 + 'A') },
  { id: 21, value: ref(111 + 'A') },
  { id: 22, value: ref(111 + 'A') },
  { id: 74, value: ref(111 + 'V') },
  { id: 75, value: ref(111 + 'V') },
  { id: 76, value: ref(111 + 'V') },
  { id: 77, value: ref(111 + 'A') },
  { id: 78, value: ref(111 + 'A') },
  { id: 79, value: ref(111 + 'A') },
  { id: 80, value: ref(111 + 'V') },
  { id: 81, value: ref(111 + 'V') },
  { id: 82, value: ref(111 + 'V') },
  { id: 83, value: ref(111 + 'V') },
  { id: 84, value: ref(111 + 'A') },
])
// 管理弹窗显示状态
const isPopupVisible = ref(false);

const recycleTwo = ref('');
recycleTwo.value = 0;
// 创建阀门的初始状态

//打开阀门状态
const openSwitch = async (data) => {
  const data_status = {
    type: 4,
    context: 1,
    typeOperate: 1,
    deviceId: data.id,
    deviceName: `水系统-球阀${data.id}'打开'`,
    place: 8,
  };
  console.log('Sending data:', data.value); // 调试信息
  try {
    socket.send(data_status);
  } catch (error) {
    console.error('Error sending WebSocket message:', error);
  }
  showPopup();
};
const offSwitch = async (data) => {
  const data_status = {
    type: 4 ,
    context: 0,
    typeOperate: 1,
    deviceId: data.id,
    deviceName: `水系统-球阀${data.id}'关闭'`,
    place: 9,
  };
  console.log('Sending data:', data.value); // 调试信息
  try {
    socket.send(data_status);
  } catch (error) {
    console.error('Error sending WebSocket message:', error);
  }
  showPopup();
};

// 显示弹窗
const showPopup = () => {
  isPopupVisible.value = true;
  // 一秒后隐藏弹窗
  setTimeout(() => {
    isPopupVisible.value = false;
  }, 1000);
};

//处理接收到的 WebSocket 消息
bus.on('sendMsg', (data) => {
  msg.value = data;
  var listArryData = msg.value;
  const listdata = JSON.parse(listArryData);
  const type = JSON.stringify(listdata.type);
  if (type == 4) {
    const dataContainer = JSON.stringify(listdata.data);
    let NewData = JSON.parse(dataContainer);
    for (let i = 0; i < NewData.length; i++) {
      let id = JSON.parse(NewData[i].id);
      let number = JSON.parse(NewData[i].data);
      if (id > 16 && id < 20) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'V');
      } else if (id > 19 && id < 23) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'A');
      } else if (id > 67 && id < 69) {
        //启停柜
        updateQFMeterValue(id, number ); 
      } else if (id > 69 && id < 71) {
        //启停柜
        updateQFMeterValue(id, number ); 
      } else if (id > 71 && id < 73) {
        //启停柜
        updateQFMeterValue(id, number ); 
      } else if (id > 73 && id < 77) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'V');
      } else if (id > 76 && id < 80) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'A');
      } else if (id > 79 && id < 84) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'V');
      } else if (id > 83 && id < 85) {
        //启停柜电流电压
        updatedianciMeterValue(id, number / 10 + 'A');
      }    
    }
  }
})

//更新球阀状态
const updateQFMeterValue = (id, newValue) => {
  const status = statuss.value.find(fm => fm.id === id);
  if (status) {
    // 将 newValue 转换为 16 位二进制字符串
    const binaryString = newValue.toString(2).padStart(8, '0');
     // 解析二进制字符串中的四个状态位
    status.fault = binaryString[7] === '1';         // 故障信号
    // 打印每个状态位
    console.log(`fault: ${status.fault}`);
  }
};
// 更新模拟量的值
const updatedianciMeterValue = (id, newValue) => {
  const simulateValue = simulateValues.value.find(fm => fm.id === id);
  if (simulateValue) {
    simulateValue.value = newValue;
  }
};

</script>

<style lang="scss">
.on-off {
  background-image: url('');
  /*on-off  提前确定球阀图标位置  后续图标位置微调 */
  .on-off {
    .icon {
      width: 0vw;
      height: 0vh;
    }
    
    .active {
      background-color: green;  /* 激活状态为绿色 */
    }
    .active_ {
      background-color: red;  /* 故障信号为红色 */
    }
    /* 默认的圆点样式 */
    .remote-control {
      position: absolute;
      width: 10px;            /* 圆点的直径 */
      height: 10px;           /* 圆点的直径 */
      border-radius: 50%;     /* 使元素变成圆形 */
      background-color: yellow; /* 默认灰色背景 */
      margin-right: 10px;     /* 圆点之间的间距 */
      top: -15px;
      right: 15px;
    }
    .fault {
      position: absolute;
      width: 10px;            /* 圆点的直径 */
      height: 10px;           /* 圆点的直径 */
      border-radius: 50%;     /* 使元素变成圆形 */
      background-color: yellow; /* 默认灰色背景 */
      margin-right: 10px;     /* 圆点之间的间距 */
      top: -15px;
      right: -5px;
    }
    /* active 类的样式（表示远控状态） */
    .remote-control.active {
      background-color: green; /* 激活时圆点为绿色 */
    }

    /* active_ 类的样式（表示故障状态） */
    .fault.active_ {
      background-color: red;  /* 激活时圆点为红色 */
    }
    .status23 {
      /* 设置位置 */
      position: fixed !important;
      top: 20%;   
      left: 80%;  
    }
    .status24 {
      /* 设置位置 */
      position: fixed !important;
      top: 20%;   
      left: 20%;  
    }
    .status25 {
      /* 设置位置 */
      position: fixed !important;
      top: 20%;   
      left: 50%;  
    }
    .open {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 如果你也想水平居中 */
  width: 35px;
  height: 30px;
  background-color: black;
  color: rgb(255, 255, 255);
  font-size: 20px;
  margin-left: 2px;
  margin-right: 2px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
}

.off {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 如果你也想水平居中 */
  width: 35px;
  height: 30px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: black;
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
}
.ting {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 如果你也想水平居中 */
  width: 65px;
  height: 30px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: black;
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer; /* 鼠标悬停时显示为手型，提示可以点击 */
}
    .qiting1 {
      /* 设置位置 */
      position: fixed !important;
      top: 6%;   
      left: 20%;
    }
    .qiting2 {
      /* 设置位置 */
      position: fixed !important;
      top: 6%;   
      left: 50%;
    }
    .qiting3 {
      /* 设置位置 */
      position: fixed !important;
      top: 6%;   
      left: 80%;
    }
    .qitinggui1 {
      /* 设置位置 */
      position: fixed !important;
      top: 24%;   
      left: 16%;
    }
    .qitinggui2 {
      /* 设置位置 */
      position: fixed !important;
      top: 26%;   
      left: 16%;
    }
    .qitinggui3 {
      /* 设置位置 */
      position: fixed !important;
      top: 28%;   
      left: 16%;
    }
    .qitinggui4 {
      /* 设置位置 */
      position: fixed !important;
      top: 30%;   
      left: 16%;
    }
    .qitinggui5 {
      /* 设置位置 */
      position: fixed !important;
      top: 32%;   
      left: 16%;
    }
    .qitinggui6 {
      /* 设置位置 */
      position: fixed !important;
      top: 34%;   
      left: 16%;
    }
    .qitinggui7 {
      /* 设置位置 */
      position: fixed !important;
      top: 36%;   
      left: 16%;
    }
    .qitinggui8 {
      /* 设置位置 */
      position: fixed !important;
      top: 38%;   
      left: 16%;
    }
    /* 增加模拟量显示的样式 */
    .simulate-value17 {
      position: fixed !important;
      top: 30.5%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value18 {
      position: fixed !important;
      top: 32.3%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value19 {
      position: fixed !important;
      top: 34.3%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value20 {
      position: fixed !important;
      top: 24.3%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value21 {
      position: fixed !important;
      top: 26.3%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value22 {
      position: fixed !important;
      top: 28.3%;
      left: 20%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value74 {
      position: fixed !important;
      top: 30.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value75 {
      position: fixed !important;
      top: 32.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value76 {
      position: fixed !important;
      top: 34.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value77 {
      position: fixed !important;
      top: 24.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value78 {
      position: fixed !important;
      top: 26.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value79 {
      position: fixed !important;
      top: 28.3%;
      left: 50%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value80 {
      position: fixed !important;
      top: 30.3%;
      left: 80%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value81 {
      position: fixed !important;
      top: 32.3%;
      left: 80%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value82 {
      position: fixed !important;
      top: 34.3%;
      left: 80%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value83 {
      position: fixed !important;
      top: 36.3%;
      left: 80%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .simulate-value84 {
      position: fixed !important;
      top: 38.3%;
      left: 80%;
      font-size: 15px;
      color: rgb(60, 89, 165);
    }
    .input-container {
      margin-bottom: 10px;
    }

    input {
      border: none; /* 移除边框 */
    }
  }
}
</style>